<main id="dd_actual_receipt_report">
  <hl-page-header title="实收明细表" class="mb-20">
    <hl-button type="outline" @on-click="excl" v-if="quanxian.includes('c1004')">导出</hl-button>
  </hl-page-header>

  <div class="head-container clearfix" style="padding-top:0px;">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input class="global_ipt_text" v-model="keyword" autocomplete="off" type="text" placeholder="客户名称"/>
        </div>
      </div>

      <div class="flow">
        <p>收款日期</p>
        <div class="pull-left" style="width: 120px;">
          <web-calendar v-model="beginTime" tips="起始时间"></web-calendar>
        </div>
        <div class="pull-left" style="padding:6px 5px 0;">至</div>
        <div class="pull-left" style="width: 120px;">
          <web-calendar v-model="endTime" tips="截止时间"></web-calendar>
        </div>
      </div>
      <div class="flow">
        <p>费项</p>
        <hl-select :data="expenseList" v-model="selectedExpense" width="140" @on-change="handleSelectExpense"></hl-select>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10" v-show="isExtenseFlag">
      <div class="flow">
        <p>项目</p>
        <hl-select :data="projectList" v-model="projectId" width="140" @on-change="getGroupPrimaryData"></hl-select>
      </div>
      <div class="flow">
        <p>楼栋</p>
        <hl-select :data="buildingList" v-model="buildingId" width="140" @on-change="getbuildingId"></hl-select>
      </div>
      <div class="flow">
        <p>楼层</p>
        <hl-select :data="floorList" v-model="floorId" width="140" @on-change="getfloorId"></hl-select>
      </div>
      <div class="flow">
        <p>商铺</p>
        <hl-select :data="unitList" v-model="unitId" width="140"></hl-select>
      </div>

      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="screening-container">
    <div class="screening-item">
      <div class="mr-10 screening-title">收款类型</div>
      <div @mouseleave=mouseleave @mousemove="mousemove" class="popoverBody">
        <hl-checkbox-button :data="rentStatus" v-model="selectedRent" @on-click="rentClick" merge></hl-checkbox-button>
      </div>
      <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar"></span>
      <span class="popover" v-if='leftPo'>
        {{popoverText}}
        <span class="sanjiao" :style='{"left": leftPo}'></span>
      </span>
    </div>
  </div>

  <div class="rent-content br-4 global_table relative" style="padding:0;">
		<div class="hl-custom-tabl-dialog" style="zIndex:998;" v-if="loadingFlag"><img src="assets/images/loading.gif"><div>加载中...</div></div>
    <table>
      <thead>
        <tr class="global_table_title">
          <th>序</th>
          <th>收款日期</th>
          <th>收款周期</th>
          <th>收款类型</th>
          <th>项目名称</th>
          <th>费项</th>
          <th>客户名称</th>
          <th>出租资源</th>
          <th>收退</th>
          <th>面积(m²)</th>
          <th>单价(元/月)</th>
          <th>计费起始日期</th>
          <th>计费终止日期</th>
          <th>实收金额(元)</th>
          <th>欠费金额(元)</th>
          <th>帐套</th>
        </tr>
      <thead>
      <tbody>
        <tr v-for="(item, index) in listData" class="global_table_item">
          <td>{{index+1}}</td>
          <td>{{item.paymentTime | formatDate }}</td>
          <td>{{item.paymentPeriodVal || '--'}}</td>
          <td>{{item.paymentTypeVal || '--'}}</td>
          <td>{{item.projectName || '--'}}</td>

          <td>{{item.name || '--'}}</td>
          <td>{{item.zlfName || '--'}}</td>
          <td>{{item.rentResource || '--'}}</td>

          <td>{{item.paymentExplainVal || '--'}}</td>
          <td>{{item.rentUnitAcreage || '--'}}</td>
          <td>{{item.rentPrice || '--' }}</td>
          <td>{{item.billBeginDate | formatDate }}</td>
          <td>{{item.billEndDate | formatDate }}</td>
          <td>{{item.amountPayed || '--'}}</td>
          <td>{{item.amountDue || 0 }}</td>
          <td>{{item.pcompany || '--'}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="getData"></hl-select>
        条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

</main>

<script src="modules/report_bi/scripts/dd_actual_receipt_report.js" charset="utf-8"></script>
<style>
  #dd_actual_receipt_report {
    padding: 0 24px;
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .screening-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 10px;
  }

  .screening-item {
    display: flex;
    align-items: center;
  }

  .head-container{
    position: relative;
    padding: 10px 0 14px;
  }
  .head-container .mes{
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 220px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }
  .hl-date-text{
    box-shadow: none;
    height: 34px;
    padding-left: 4px;
    background-color: #F9F9F9;
    border-radius: 4px;
    border: none;
  }
  .screening-container .popoverBody{
    position: relative;
  }
  .screening-container .popover{
    display: block;
    padding: 5px 10px;
    width: 300px;
    height: auto;
    position: absolute;
    border-radius: 5px;
    color: #fff;
    left: -220px;
    top: -40px;
    line-height: 20px;
    background-color: #21242b;
    text-align: center;
    position: relative;
  }
  .screening-container .sanjiao{
    width: 0;
    height: 0;
    position:absolute;
    left: 40%;
    top: 100%;
    transform: translate(-50%,-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #21242b;
  }
</style>
